<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hope2</title>

    <link rel="stylesheet" href="https://lib.baomitu.com/bulma/0.9.1/css/bulma.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts-more.js"></script>
    <script src="https://code.highcharts.com.cn/highstock/8.2.2/modules/data.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/variwide.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/oldie.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){
            post();
        });

        var options = {
            chart: {
                type: 'packedbubble',
                height: '100%'
            },
            title: {
                text: '2014 年世界各地碳排放量'
            },
            tooltip: {
                useHTML: true,
                pointFormat: '<b>{point.name}:</b> {point.y}m CO<sub>2</sub>'
            },
            plotOptions: {
                packedbubble: {
                    minSize: '30%',
                    maxSize: '120%',
                    zMin: 0,
                    zMax: 1000,
                    layoutAlgorithm: {
                        gravitationalConstant: 0.05,
                        splitSeries: true,
                        seriesInteraction: false,
                        dragBetweenSeries: true,
                        parentNodeLimit: true
                    },
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}',
                        filter: {
                            property: 'y',
                            operator: '>',
                            value: 250
                        },
                        style: {
                            color: 'black',
                            textOutline: 'none',
                            fontWeight: 'normal'
                        }
                    }
                }
            },
            series: [{
                name: '欧洲',
                data: [{
                    name: 'Germany',
                    value: 0.1
                },
                    {
                        name: "Cyprus",
                        value: 1.2
                    }]
            }, {
                name: '非洲',
                data: [{
                    name: "Senegal",
                    value: 2.2
                }, {
                    name: "Algeria",
                    value: 1444.5
                }]
            }, {
                name: '大洋洲',
                data: [{
                    name: "Australia",
                    value: 4.4
                },
                    {
                        name: "New Zealand",
                        value: 3.1
                    },
                    {
                        name: "Papua New Guinea",
                        value: 1.1
                    }]
            }]
        };



        function post() {
            Highcharts.chart('container', options);
        }
    </script>
</head>


<body class="layout-default">
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://qianyitian.com/">
                <img style="height:36px;width:36px;" src="https://img.qianyitian.com/icon/logo.png">  <h4
                    class="title is-3">Hope2</h4>
            </a>
        </div>
    </div>
</nav>

<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-3">
                <div class="field">
                    <label class="label">计算最近多少天的数据</label>
                    <div class="control">
                        <textarea id="codes" name="codes" class="textarea" placeholder="基金代码" rows="10"
                                  value="002001"></textarea>
                    </div>
                </div>
                <div class="field is-grouped">
                    <div class="control">
                        <button class="button is-link" onclick="post()">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<hr>
    <div class="container">
        <div id="container"></div>
    </div>
<hr>

<style>
    #container {
        min-width: 320px;
        max-width: 1800px;
        margin: 0 auto;
    }
</style>
</body>
</html>
